<template>
  <div>
    <ul class="starList flex">
      <li v-for="i in 5" :key="i" @click="doRate(i)">
        <img src="../assets/images/icon_common_star1@3x.png" alt="" :style="{width: size + 'px'}" v-if="i <= score">
        <img src="../assets/images/icon_common_star3@3x.png" alt="" :style="{width: size + 'px'}" v-else>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    watch: {
      score(val){
        console.log('score=' + val)
      }
    },
    props: {
      size: {
        type: [Number, String],
        default: 20
      },
      score: {
        type: [Number, String]
      },
      inputIndex: {
        type: [Number, String],
        default: 0
      },
      readonly: {
        type: Boolean,
        default: false
      }
    },
    mounted() {

    },
    methods: {
      doRate (i) {
        if (this.readonly) {
          return
        }
        this.score = i
        this.$emit('rate', JSON.stringify({
          result: i,
          inputIndex: this.inputIndex
        }))
      }
    }
  }
</script>

<style scoped lang="less">
.starList{
  img{
    vertical-align: bottom;
    margin-right: 1px;
  }
}
</style>
